<template>
    <div class="backgorund-management-container">
        <n-card>
            <n-tabs type="line" animated>

                <n-tab-pane name="audio" tab="歌曲">

                    <AudioTable></AudioTable>

                </n-tab-pane>

                <n-tab-pane name="user" tab="用户">

                    <UserTable></UserTable>

                </n-tab-pane>

                <n-tab-pane name="library" tab="乐库">

                    乐库后台

                </n-tab-pane>

            </n-tabs>
        </n-card>
    </div>
</template>
    
<script setup lang='ts'>
import { onBeforeMount } from 'vue';
import { userInfoStore, useSystemConfigStore } from '../../store/index'
import { useRouter } from 'vue-router';
import { useMessage } from 'naive-ui'
import AudioTable from './Background/AudioTable.vue'
import UserTable from './Background/UserTable.vue'

const useSystemConfig = useSystemConfigStore()
const userInfo = userInfoStore()
const router = useRouter()
const message = useMessage()

onBeforeMount(() => {
    if (userInfo.roles !== 'admin' && userInfo.roles !== 'root') {
        useSystemConfig.changeSetPage('systemConfig')
        router.replace({ name: 'systemConfig' })
        message.warning('没有权限用户禁止使用此功能，已跳转至系统配置')
    }
})


</script>
    
<style scoped lang="less">
.backgorund-management-container {
    width: 100%;

    .n-tab-pane {
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;

        .audio-table-nav {
            width: 100%;
            display: flex;
            margin-bottom: 8px;
        }
    }
}
</style>